<template>
  <table class="tbale table-bordered" style="text-align: center">
    <tr>
      <td colspan="2">
        <h1>注册页面</h1>
      </td>
    </tr>
    <tr>
      <td>会员名称:</td>
      <td>
        <input
          type="text"
          v-model="info.mL_Name"
          placeholder="请输入会员名称"
        />
      </td>
    </tr>
    <tr>
      <td>会员密码:</td>
      <td>
        <input
          type="password"
          v-model="info.mL_Pwd"
          placeholder="请输入会员密码"
        />
      </td>
    </tr>
    <tr>
      <td>真实姓名:</td>
      <td>
        <input
          type="text"
          v-model="info.mL_UserName"
          placeholder="请输入真实姓名"
        />
      </td>
    </tr>
    <tr>
      <td>联系方式:</td>
      <td>
        <input
          type="text"
          v-model="info.mL_Phone"
          placeholder="请输入联系方式"
        />
      </td>
    </tr>
    <tr>
      <td>身份证号:</td>
      <td>
        <input
          type="text"
          placeholder="请输入身份证号"
          v-model="info.mL_IdCard"
          @change="GetBirthday"
        />
      </td>
    </tr>
    <tr>
      <td>出生日期:</td>
      <td>
        <input type="date" v-model="info.mL_Mtime" />
      </td>
    </tr>
    <tr>
      <td>性别:</td>
      <td>
        <input
          type="radio"
          :value="false"
          name="sex"
          v-model="info.mL_Sex"
          
        />男
        <input type="radio" :value="true" name="sex" v-model="info.mL_Sex" />女
      </td>
    </tr>
    <tr>
      <td>家庭住址:</td>
      <td>
        <textarea
          placeholder="请输入家庭住址"
          v-model="info.mL_Address"
        ></textarea>
      </td>
    </tr>
    <tr>
      <td>会员状态:</td>
      <td>
        <input
          type="radio"
          :value="false"
          name="state"
          v-model="info.mL_State"
          
        />正常
        <input
          type="radio"
          :value="true"
          name="state"
          v-model="info.mL_State"
        />禁用
      </td>
    </tr>
    <tr>
      <td>会员积分:</td>
      <td>
        <input
          type="text"
          placeholder="请输入会员积分"
          v-model="info.mL_Integral"
        />
      </td>
    </tr>
    <tr>
      <td>会员充值金额:</td>
      <td>
        <input
          type="text"
          placeholder="请输入会员充值金额"
          v-model="info.mL_Money"
        />
      </td>
    </tr>
    <tr>
      <td>会员类型:</td>
      <td>
        <select v-model="info.mT_Id">
          <option :value="0">请选择</option>
          <option v-for="item in typeinfo" :value="item.mT_Id">
            {{ item.mT_Name }}
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center">
        <input
          type="button"
          value="添加会员信息"
          @click="AddMember"
          class="btn btn-success"
        />
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
// 引入ref
import { ref, onMounted } from "vue";
// 引入axios
import axios from "axios";

const info = ref({
  mL_Name: "",
  mL_Pwd: "",
  mL_UserName: "",
  mL_Phone: "",
  mL_IdCard: "",
  mL_Mtime: "",
  mL_Sex: false,
  mL_Address: "",
  mL_State: false,
  mL_Integral: "",
  mL_Money: 0,
  mT_Id: 0,
});

// 创建响应式数据保存会员类型信息
const typeinfo = ref([
  {
    mT_Id: 0,
    mT_Name: "",
  },
]);

// 生命周期钩子  页面加载时执行
onMounted(() => {
  LoadMemberType();
});

// 获取会员类型信息
const LoadMemberType = () => {
  axios
    .get("https://localhost:7071/api/Member/GetMemberTypes")
    .then((res) => {
      console.log(res.data);
      typeinfo.value = res.data;
    })
    .catch((error) => {
      console.log(error);
    });
};

// 注册事件  会员添加
const AddMember = () => {
  // 验证姓名不能为空
  if (info.value.mL_Name == "") {
    alert("请输入会员姓名");
    return;
  }

  // 验证密码长度不得少于6位
  if (info.value.mL_Pwd.length < 6) {
    alert("密码长度不得少于6位");
    return;
  }

  //  var p="/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/"
  // 验证手机号格式是否正确
  if (
    !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
      info.value.mL_Phone
    )
  ) {
    alert("联系方式不正确");
    return;
  }

  // 只能用户注册
  if (info.value.mT_Id != 2) {
    alert("只能用户类型注册");
    return;
  }

  axios
    .post("https://localhost:7071/api/Member/MemberRegister", info.value)
    .then((res) => {
      if (res.data > 0) {
        alert("注册成功");
      } else if (res.data == -1) {
        alert("用户名已存在");
      } else {
        alert("注册失败");
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

// 获取出生年月日
const GetBirthday = () => {
  let b = info.value.mL_IdCard.substring(6, 14);
  info.value.mL_Mtime =
    b.substring(0, 4) + "-" + b.substring(4, 6) + "-" + b.substring(6, 8);
};
</script>

<style scoped>
</style>